<template>
	<view class="content">
		<loadingPage v-show="loadingPage"></loadingPage>
		<view v-show="!loadingPage">
			<view class="list-box" >
				<view class="row b-b">
					<text class="tit">收货人</text>
					<input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名"
						placeholder-class="placeholder" />
				</view>
				<view class="row b-b">
					<text class="tit">手机号码</text>
					<input class="input" type="number" maxlength="11" v-model="addressData.mobile" placeholder="收货人手机号码"
						placeholder-class="placeholder" />
				</view>
				<view class="row b-b">
					<text class="tit">所在地区</text>
					<view class="input">
						<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
							<text class="placeholder t-color" v-if="addressData.region">{{addressData.region}}</text>
							<text class="placeholder" v-else>点击选择</text>
						</pick-regions>
					</view>
				</view>
				<view class="row b-b">
					<text class="tit">详细地址</text>
					<input class="input" type="text" v-model="addressData.address" placeholder="街道小区、楼号、门牌"
						placeholder-class="placeholder" />
				</view>

				<view class="row default-row">
					<text class="tit m-w">设为默认收货地址</text>
					<switch :checked="addressData.defaule" color="#9D5EF4" @change="switchChange" />
				</view>
			</view>
			<view class="add-btn" @click="confirm">
				<text>确定</text>
			</view>
		</view>
	</view>
</template>

<script>
	import pickRegions from '@/shopPages/pick-regions/pick-regions.vue'
	export default {
		components: {
			pickRegions
		},
		data() {
			return {
				addressData: {
					name: '',
					mobile: '',
					address: '',
					region: '',
					lat: '',
					lng: '',
					default: false
				},
				region: [],
				defaultRegion: ['陕西省', '商洛市', '洛南县'],
				defaultRegionCode: '611021',
				loadingPage: true
			}
		},
		computed: {
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join(' ')
			}
		},
		onLoad(option) {

			let title = '新建地址';
			if (option.type === 'edit') {
				title = '编辑地址'

				this.addressData = JSON.parse(option.data)
			}
			this.manageType = option.type;
			uni.setNavigationBarTitle({
				title
			})
		},
		onReady() {
			setTimeout(() => {
				this.loadingPage = false
			}, 1000)

		},
		methods: {
			switchChange(e) {
				this.addressData.default = e.detail;
			},
			handleGetRegion(region) {

				this.addressData.region = region[0].name + '-' + region[1].name + '-' + region[2].name
			},

			//提交
			async confirm() {
				let moren = '0';
				let data = this.addressData;
				if (!data.name) {
					this.msg('请填写收货人姓名');
					return;
				}
				if (!data.mobile) {
					this.msg('请输入正确的手机号码');
					return;
				}
				if (!data.region) {
					this.msg('请选择省市县');
					return;
				}
				if (!data.address) {
					this.msg('请填写详细地址信息');
					return;
				}

				//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义

				if (this.addressData.default) {
					moren = 1
				}



				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/api/shop/add_address',
					data: {
						name: data.name,
						mobile: data.mobile,
						address: data.address,
						region: data.region,
						default: moren,
					}
				});
				if (result.data.code == 200) {
					this.msg('添加成功')
					uni.$emit('addaddresok', 'ok')
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.list-box {
		padding: 37rpx 30rpx 0 0;

		.placeholder {
			font-size: 32rpx;
			font-weight: 400;
			color: #999999;
		}

		.default-row {
			justify-content: space-between;
		}

		.row {
			display: flex;
			align-items: center;
			margin-bottom: 32rpx;

			.tit {
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
				display: inline-block;
				width: 184rpx;
				text-align: center;
			}

			.m-w {
				width: auto;
				padding-left: 32rpx;
			}

			.input {
				flex: 1;
				height: 88rpx;
				background: #ffffff;
				border-radius: 16rpx;
				line-height: 88rpx;
				padding-left: 24rpx;
				color: #333333;
				font-size: 32rpx;

				.t-color {
					color: #333333;
				}

			}
		}
	}

	.add-btn {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		bottom: 40rpx;
		left: 30rpx;
		right: 30rpx;
		height: 98rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		background: linear-gradient(270deg, #DB89F5 0%, #834BF4 100%);
		border-radius: 20rpx;
	}
</style>
